<template>
	<!-- 参数填写 -->
	<view class="agree_jn">
		<uni-data-checkbox v-model="orderSet" :localdata="range"></uni-data-checkbox>
		<!-- 签署信息 -->
		<view class="sign_item" v-for="(item,index) in items" :key="index">
			<view>
				<p>
					<span class="round_ruleForm" v-if="orderSet == 0">{{index+1}}</span>
					<i class="iconfont setIcon" v-if="orderSet == 1 && item.signerType == 0">&#xe679;</i>
					<i class="iconfont setIcon" v-if="orderSet == 1 && item.signerType == 1">&#xe8c8;</i>
					<span v-if="item.signerType == 0">企业</span><span v-else>个人</span>
				</p>
				<p v-if="item.signerType == 0">{{item.signCompany}}</p>
				<p v-else>{{item.signerName}}</p>
			</view>

			<!-- 向下移动 plain背景透明-->
			<view v-if="orderSet == 0" style="width: 100rpx;">
				<button plain v-if="index !== items.length-1" @click="down(index)">
					<i class="iconfont jiantou" style="color: #00a660;">&#xe67a;</i></button>
				<button plain disabled v-else><i class="iconfont jiantou">&#xe67a;</i></button>
				<!-- 向上移动 -->
				<button plain :disabled="index == 0" @click="up(index)" v-if="index !== 0">
					<i class="iconfont jiantou" style="color: #00a660;">&#xe671;</i></button>
				<button plain disabled v-else><i class="iconfont jiantou">&#xe671;</i></button>
			</view>
		</view>

		<view class="footer-btn"><button @click="confirm">确 定</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderSet: 0, //0顺序 1无序
				range: [{
					text: '顺序签署',
					value: 0
				}, {
					text: '无序签署',
					value: 1
				}, ],
				items: [],
			};
		},
		onLoad(option) {
			this.items = JSON.parse(option.tableData)
			this.orderSet = JSON.parse(option.signSortType)
			console.log(this.items)
		},
		methods: {
			/**向下移动*/
			down(index) {
				let arr = this.items;
				arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
			},
			/**向上移动*/
			up(index) {
				let arr = this.items;
				arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
			},
			/**确 定 */
			confirm() {
				uni.$emit('signOrder', {
					tableData: this.items,
					setVal: this.orderSet
				})
				uni.navigateBack({
					delta: 1
				})
				// uni.reLaunch({
				// 	url: '/pages/sign/sign?tableData=' +JSON.stringify(this.items) + '&setVal='+this.orderSet
				// })
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: $uni-bg-color;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		font-size: 28rpx;
	}

	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		margin: 10rpx 30rpx;
	}

	.setIcon {
		color: $uni-color-primary;
		font-size: 34rpx;
		padding-right: 6rpx;
	}

	.footer-btn {
		position: fixed;
		bottom: 100rpx;
		left: 10%;

		button {
			width: 600rpx;
			background-color: $uni-color-primary;
			color: #fff;
		}
	}

	.round_ruleForm {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 50%;
		text-align: center;
		display: inline-block;
		color: #fff;
		background: $uni-color-primary;
		margin: 0 10rpx 0 0;
	}

	.agree_jn {
		padding: 20rpx 20rpx;
		background: #fff;

		// 签署信息
		.sign_item {
			margin: 30rpx 0;
			padding: 16rpx;
			border: solid 1rpx #dcdcdc;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f7f8f8;
			height: 160rpx;

			.jiantou {
				font-size: 40rpx;

			}

			uni-button {
				border-style: none;
				width: 80rpx;
				display: inline-block;
				height: 70rpx;
				line-height: 70rpx;
			}

			uni-button:after {
				border-style: none;
			}

			p {
				padding: 8rpx;
			}

			p:last-child {
				color: #999999;
				font-size: 28rpx;
				width: 500rpx;
			}
		}
	}
</style>
